body{
    font-family: 'space mono';
    background-color:#dad6d2;
    background-size: cover;
    background-repeat: no-repeat;
    margin: 0%;
}

h1 {
font-size: 15pt;
}

.container-navigation {
display: flex;
justify-content: space-between;
border-bottom: 2px solid white;
}

.column-navigation {
width: 50%;
}

.navigation {
text-align: right;
padding: 2%;
width: auto;
}

.navigation ul a {
padding-left: 3%;
padding-right: 3%;
}

#logo-area {
text-align: left;
padding: 2%;
padding-left: 5%;
}


.container-welcome {
display: flex;
justify-content: space-between;
padding-top: 5%;
padding-bottom: 5%;
border-bottom: 2px solid white;
}

.column-welcome {
width: 50%;
}

#polaroid {
    width: 60%;
margin-left: 20%;
}

#welcome {
color: black;
padding-top: 8%;
padding-right: 5%;
}


img:hover {
transform: scaleX(-1);
}

#motto {
font-size: 35px;
padding-top: 2%;
}

.container-bio {
padding-left: 10%;
padding-right: 10%;
padding-top: 2%;
padding-bottom: 1%;   
}

.container-motto {
background-image: url(background-beach.jpg);
background-size: cover;
background-position: 20%;
width: 100%;
height: 200px;
display: flex;
justify-content: center;
align-items: center;
font-size: 20px;
font-weight: bold;
border-bottom: 2px solid white;
border-top: 2px solid white;
}

.container-profession {
display: flex;
justify-content: space-between;
padding-top: 5%;
padding-bottom: 5%;
padding-left: 10%;
border-bottom: 2px solid white;
}

.column-profession {
width: 50%;
padding-right: 5%;
}

.column-graduation {
width: 40%;
}

#polaroid2{
width: 70%;
}

#profession{
color: black;
}

.container-education {
display: flex;
justify-content: space-between;
padding-top: 2%;
padding-bottom: 2%;
padding-left: 10%;
padding-right: 10%;
border-bottom: 2px solid white;
}

.column-work {
width: 50%;
padding-right: 10%;
border-right: 2px solid white;
}

.column-education {
width: 50%;
padding-left: 10%;
}


.container-quote {
background-image: url(background-beach.jpg);
background-size: cover;
background-position: 20%;
width: 100%;
height: 200px;
display: flex;
justify-content: center;
align-items: center;
font-size: 20px;
font-weight: bold;
border-bottom: 2px solid white;
}

.container-skills {
display: flex;
justify-content: space-between;
padding-left: 10%;
padding-right: 10%;
padding-bottom: 2%;   
border-bottom: 2px solid white;
}


.column-skills {
box-sizing: border-box;
}

#heading-skills {
padding-left: 10%;
padding-right: 10%;
padding-top: 2%;
padding-bottom: 1%;
text-align: center;
}



.current-projects {
padding-left: 10%;
padding-right: 10%;
padding-top: 2%;
padding-bottom: 1%;   
border-bottom: 2px solid white;
}



.socials {
padding-left: 10%;
padding-right: 10%;
padding-top: 2%;
padding-bottom: 2%;         
font-size: 15pt;
}

#text-typing {
    font-size: 40pt;
    margin-right: 40%;
    white-space:nowrap;
    overflow:hidden;
    animation:typing 4s steps(22,end) forwards,
              blink 1s infinite;
  }
  @keyframes typing {
    0% { width:0% }
    60% { width:60% }
  }
  @keyframes blink {
    0%,60% {
      border-right:2px solid transparent;
    }
    50% {
      border-right:2px solid #222;
    }
  }